{"componentChunkName":"component---src-templates-blog-post-js","path":"/Build-Simple-Timeline-in-React/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"markdownRemark":{"id":"bb17deea-a6d9-5d21-a5c7-4915053d6945","excerpt":"A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education history, past…","html":"

A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education history, past projects, your blog posts and everything else that can be structured in a timeline. You can potentially build this on your own, or you can use one of the existing plugins which are very easy to setup and look pretty good out of the box. I will show you one of those plugins and an example of how you can generate all elements with some simulated data and you will have your own timeline in no time.

\n

If you prefer a video version you can watch me build this on Youtube:

\n
\n

I started a new React app by running create-react-app command in my working folder.

\n
create-react-app timeline
\n

The plan is to build a Component which can pull all of our job and education history, including titles, dates, descriptions etc. and programmatically create a timeline out of it. I will simulate a database by using a separate JavaScript file which exports an array of objects containg all data, but you can use whatever you have available, or just use mine. Here is what the file timelineElements.js looks like:

\n
let timelineElements = [\n  {\n    id: 1,\n    title: \"Frontend Developer\",\n    location: \"Dragontail, Ascana\",\n    description:\n      \"Converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.\",\n    buttonText: \"View Frontend Projects\",\n    date: \"August 2016 - present\",\n    icon: \"work\",\n  },\n  {\n    id: 2,\n    title: \"Backend Developer\",\n    location: \"Skystead, Craonia\",\n    description:\n      \"Working hand-in-hand with front-end developers by providing the outward facing web application elements server-side logic. Creating the logic to make the web app function properly, and accomplishing this through the use of server-side scripting languages.\",\n    buttonText: \"View Backend Projects\",\n    date: \"June 2013 - August 2016\",\n    icon: \"work\",\n  },\n  {\n    id: 3,\n    title: \"Quality Assurance Engineer\",\n    location: \"South Warren, Geshington\",\n    description:\n      \"Assessing the quality of specifications and technical design documents in order to ensure timely, relevant and meaningful feedback.\",\n    buttonText: \"Company Website\",\n    date: \"September 2011 - June 2013\",\n    icon: \"work\",\n  },\n  {\n    id: 4,\n    title: \"Oak Ridge College\",\n    location: \"South Warren, Geshington\",\n    description:\n      \"Online Course in Magical Beasts and Wonders of the World - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque sagittis tellus, non ultrices lacus tempus vel.\",\n    buttonText: \"Course Certificate\",\n    date: \"September 2011\",\n    icon: \"school\",\n  },\n  {\n    id: 5,\n    title: \"Hawking College\",\n    location: \"Skystead, Craonia\",\n    description:\n      \"College - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque sagittis tellus, non ultrices lacus tempus vel.\",\n    buttonText: \"College Projects\",\n    date: \"2007 - 2011\",\n    icon: \"school\",\n  },\n  {\n    id: 6,\n    title: \"Marble Hills Grammar School\",\n    location: \"Dragontail, Ascana\",\n    description:\n      \"Highschool - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec scelerisque sagittis tellus, non ultrices lacus tempus vel.\",\n    date: \"2003 - 2007\",\n    icon: \"school\",\n  },\n]\n\nexport default timelineElements
\n

As our data is going to contain previous jobs and school information we will need two separate icons to display it. I found a couple of svg icons online - pc monitor for jobs, and college hat for education.

\n

We also need to install the timeline plugin by running the npm command:

\n
npm i react-vertical-timeline-component
\n

Since this is a simple project I am going to put everything inside of the App component except for the css which will go into a separate App.css file. To start of we need to import the plugin, data file and our svg icons.

\n
import \"./App.css\"\nimport { ReactComponent as WorkIcon } from \"./work.svg\"\nimport { ReactComponent as SchoolIcon } from \"./school.svg\"\n\nimport timelineElements from \"./timelineElements\"\n\nimport {\n  VerticalTimeline,\n  VerticalTimelineElement,\n} from \"react-vertical-timeline-component\"\n\nimport \"react-vertical-timeline-component/style.min.css\"\n\nfunction App() {\n  return (\n    <div>\n      <h1 className=\"title\">Timeline</h1>\n      <VerticalTimeline></VerticalTimeline>\n    </div>\n  )\n}\n\nexport default App
\n

We need to map out our data file into timeline elements.

\n
import \"./App.css\"\nimport { ReactComponent as WorkIcon } from \"./work.svg\"\nimport { ReactComponent as SchoolIcon } from \"./school.svg\"\n\nimport timelineElements from \"./timelineElements\"\n\nimport {\n  VerticalTimeline,\n  VerticalTimelineElement,\n} from \"react-vertical-timeline-component\"\n\nimport \"react-vertical-timeline-component/style.min.css\"\n\nfunction App() {\n  return (\n    <div>\n      <h1 className=\"title\">Timeline</h1>\n      <VerticalTimeline>\n        {timelineElements.map(element => {          return (            <VerticalTimelineElement              key={element.key}              date={element.date}              dateClassName=\"date\"            >              <h3 className=\"vertical-timeline-element-title\">                {element.title}              </h3>              <h5 className=\"vertical-timeline-element-subtitle\">                {element.location}              </h5>              <p id=\"description\">{element.description}</p>            </VerticalTimelineElement>          )        })}      </VerticalTimeline>\n    </div>\n  )\n}\n\nexport default App
\n

The timeline plugin gives us an option to set up an object for the icon styles, and we can use this to set a different icon with different styles based on the type of icon defined in the file.

\n
import \"./App.css\"\nimport { ReactComponent as WorkIcon } from \"./work.svg\"\nimport { ReactComponent as SchoolIcon } from \"./school.svg\"\n\nimport timelineElements from \"./timelineElements\"\n\nimport {\n  VerticalTimeline,\n  VerticalTimelineElement,\n} from \"react-vertical-timeline-component\"\n\nimport \"react-vertical-timeline-component/style.min.css\"\n\nfunction App() {\n  let workIconStyles = { background: \"#06D6A0\" }  let schoolIconStyles = { background: \"#f9c74f\" }\n  return (\n    <div>\n      <h1 className=\"title\">Timeline</h1>\n      <VerticalTimeline>\n        {timelineElements.map(element => {\n          let isWorkIcon = element.icon === \"work\"\n\n          return (\n            <VerticalTimelineElement\n              key={element.key}\n              date={element.date}\n              dateClassName=\"date\"\n              iconStyle={isWorkIcon ? workIconStyles : schoolIconStyles}              icon={isWorkIcon ? <WorkIcon /> : <SchoolIcon />}            >\n              <h3 className=\"vertical-timeline-element-title\">\n                {element.title}\n              </h3>\n              <h5 className=\"vertical-timeline-element-subtitle\">\n                {element.location}\n              </h5>\n              <p id=\"description\">{element.description}</p>\n            </VerticalTimelineElement>\n          )\n        })}\n      </VerticalTimeline>\n    </div>\n  )\n}\n\nexport default App
\n

We can also set up a custom button for each of the timeline elements which can also have different styles applied to it depending on the timeline element type.

\n
import \"./App.css\"\nimport { ReactComponent as WorkIcon } from \"./work.svg\"\nimport { ReactComponent as SchoolIcon } from \"./school.svg\"\n\nimport timelineElements from \"./timelineElements\"\n\nimport {\n  VerticalTimeline,\n  VerticalTimelineElement,\n} from \"react-vertical-timeline-component\"\n\nimport \"react-vertical-timeline-component/style.min.css\"\n\nfunction App() {\n  let workIconStyles = { background: \"#06D6A0\" }\n  let schoolIconStyles = { background: \"#f9c74f\" }\n\n  return (\n    <div>\n      <h1 className=\"title\">Timeline</h1>\n      <VerticalTimeline>\n        {timelineElements.map(element => {\n          let isWorkIcon = element.icon === \"work\"\n          let showButton =            element.buttonText !== undefined &&            element.buttonText !== null &&            element.buttonText !== \"\"\n          return (\n            <VerticalTimelineElement\n              key={element.key}\n              date={element.date}\n              dateClassName=\"date\"\n              iconStyle={isWorkIcon ? workIconStyles : schoolIconStyles}\n              icon={isWorkIcon ? <WorkIcon /> : <SchoolIcon />}\n            >\n              <h3 className=\"vertical-timeline-element-title\">\n                {element.title}\n              </h3>\n              <h5 className=\"vertical-timeline-element-subtitle\">\n                {element.location}\n              </h5>\n              <p id=\"description\">{element.description}</p>\n              {showButton && (                <a                  className={`button ${                    isWorkIcon ? \"workButton\" : \"schoolButton\"                  }`}                  href=\"/\"                >                  {element.buttonText}                </a>              )}            </VerticalTimelineElement>\n          )\n        })}\n      </VerticalTimeline>\n    </div>\n  )\n}\n\nexport default App
\n

With that our component is finished and we can move on to the App.css file and apply the rest of our styling.

\n
body {\n  background: #3da3d5;\n  font-family: \"Montserrat\", sans-serif;\n  font-size: 16px;\n  color: rgb(53, 53, 53);\n}\n\n.title {\n  font-size: 15em;\n  text-align: center;\n  font-family: \"Bebas Neue\", sans-serif;\n}\n\nh3 {\n  padding-top: 0.25em;\n}\n\n.vertical-timeline-element-content {\n  box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25), 0 0.4em 1.25em 0 rgba(0, 0, 0, 0.15) !important;\n  padding: 2em 3em !important;\n}\n\n.date {\n  color: rgb(201, 251, 255);\n}\n\n#description {\n  margin: 1.5em 0 2em 0;\n}\n\n.button {\n  text-decoration: none;\n  padding: 0.5em 1em;\n  border-radius: 5px;\n  color: white;\n}\n\n.workButton {\n  background-color: #06d6a0;\n}\n\n.workButton:hover {\n  background-color: #0ac593;\n}\n\n.schoolButton {\n  background-color: #f9c74f;\n}\n\n.schoolButton:hover {\n  background-color: #f3bc3c;\n}
\n

I’ve made the date text a very light blue color which becomes a bit unreadable once we switch to a screen width lower than 1700px. We can fix this along with its awkward positioning by using a simple media rule.

\n
@media only screen and (max-width: 1700px) {\n  .vertical-timeline-element-date {\n    display: block !important;\n    float: none !important;\n    color: rgb(44, 44, 44);\n    margin-top: 1.5em;\n  }\n}
\n

If you followed along successfully you should now have a prototype of a simple, yet versatile timeline. The plugin itself allows you to add and switch many different things. For full documentation take a look at its official npm page.

\n

You can find the full code on my GitHub.

\n
\n
If you have any questions or comments you can reach out to me on Twitter and Instagram, where I also post interesting code tidbits and designs.\n

I also have a YouTube channel where I regularly upload React and web dev tutorials, so if that’s your cup of tea feel free to support me by subscribing.

","frontmatter":{"title":"Build Simple Timeline in React","series":null,"seriesLink":null,"date":"November 22, 2020","description":"A lot of portfolio websites today have some sort of a timeline which can be used in different ways. You can showcase your job and education history, past projects, your blog posts and everything else that can be structured in a timeline. You can potentially build this on your own, or you can use one of the existing plugins which are very easy to setup and look pretty good out of the box. I will show you one of those plugins and an example of how you can generate all elements with some simulated data and you will have your own timeline in no time.","tags":["web","react"],"featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACHElEQVQoz02S709ScRTG+ReKOUs3/AFcdG7NNduqd76yOTPX0kTQIc5QS24ljgRETbhCoF4uKJehL9Da8tZSoxWamZWzH1t/06erNe3Fs+d8t7PPzjnP12B1yAh9Gcz9KpUDq1R5X2J6UqQ69J4qZwZTT5pqewqhN33SV9vqo0aX9fj9n6xO5cQNtvHXWPybXJV2uF84pCN7gGvtO7eX97k1rdEZKtA6lqfascTlOwFGuzoQ7W1c6xzH7FxCsC+ewo7dUB/5SG2gSMvCHs+3Svz+9YPdvQOC6zts7x/x8/Ab7aJCRXeGG10PKUZFjpZ9DA6NYurPUye+QOjPnk1Y/3QHc/AdLfES7vkNZteK+FbfMpLe5L6URyq84bpH4YIzh9u3wPakl1fjvTyeTVAV/UpD4gvCg3WsPfK/lQPb1Pm3qIgvU5ZMYkyqGONRLkoxjFMRjOEpLEP67aY/0R3XkN12xOZGBoMxzDrQEv2MzaedAQWXPq47y/ncLOVSgLL0DGXPJjinTlIuT1EpznBpQKU9XECMrDDQ5eRmUwNadpLQ2hbN8i6W8Acdpvy9oeA4LlLU3JP0pBO6x6gZjlHrmaPCI3HFmyFRKOGPKoQSeVbUFfZSY5S0NBE1h6xt0DShYXYoJ1DDafx6ioL+TQRHBpsuiz1Do0vFE9UYCaVoc/kZDiziDSsEpAVC82kezckEk4v0Tecw3U1h60vzB+bicRLbGqHmAAAAAElFTkSuQmCC","aspectRatio":2.6666666666666665,"src":"/static/a929e3923f26a25007ff04dbf6fd2936/0e6e2/timeline.png","srcSet":"/static/a929e3923f26a25007ff04dbf6fd2936/b460a/timeline.png 480w,\n/static/a929e3923f26a25007ff04dbf6fd2936/6e898/timeline.png 960w,\n/static/a929e3923f26a25007ff04dbf6fd2936/0e6e2/timeline.png 1920w","srcWebp":"/static/a929e3923f26a25007ff04dbf6fd2936/30cf3/timeline.webp","srcSetWebp":"/static/a929e3923f26a25007ff04dbf6fd2936/35871/timeline.webp 480w,\n/static/a929e3923f26a25007ff04dbf6fd2936/fcc10/timeline.webp 960w,\n/static/a929e3923f26a25007ff04dbf6fd2936/30cf3/timeline.webp 1920w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}}},"pageContext":{"slug":"/Build-Simple-Timeline-in-React/","previous":{"excerpt":"Instagram has such a simple, yet elegant design, and on top of that it’s very modular. It’s almost like a puzzle because it has a lot of…","fields":{"slug":"/How-to-build-Instagram-in-React/"},"frontmatter":{"date":"November 17, 2020","title":"How to build Instagram in React","series":null,"description":"Instagram has such a simple, yet elegant design, and on top of that it's very modular. It's almost like a puzzle because it has a lot of parts that can be reused throughout the app which makes it very interesting to build as a practice project. We are going to build Instagram in React and we are going to reuse as much of our code as we possibly can to make profile cards, story icons, posts and pretty much everything else that exists on Instagram's home page.","tags":["web","react"],"featuredImage":{"id":"5c63fc36-3cdb-5062-8d93-727476be18f6","publicURL":"/static/0e297124781de56c47db06278a84f787/instaBg.png","relativeDirectory":"How-to-build-Instagram-in-React","relativePath":"How-to-build-Instagram-in-React/instaBg.png"}}},"next":{"excerpt":"If you are a developer you probably have a GitHub account, and if you’re like me your profile page is probably empty. I would even say…","fields":{"slug":"/Easiest-way-to-set-up-your-Github-profile-page/"},"frontmatter":{"date":"November 27, 2020","title":"Easiest way to set up your GitHub profile page","series":null,"description":"If you are a developer you probably have a GitHub account, and if you're like me your profile page is probably empty. I would even say barren. Utterly uninteresting? If that's true then you are at the right place, because in this tutorial I am going to show you some quick and easy tips to make your GitHub profile at least somewhat presentable.","tags":["productivity","github"],"featuredImage":{"id":"7f327b1f-be71-54ba-bd4a-523d4f96e39f","publicURL":"/static/cc4780a5217804212e07214ae02b06ca/github.png","relativeDirectory":"Easiest-way-to-set-up-your-Github-profile-page","relativePath":"Easiest-way-to-set-up-your-Github-profile-page/github.png"}}}}}}